<template>
   <!-- 顶部弹出 -->
      <div>
        <div class="erjia">
        <van-cell class="se" :title="city" @click="showPopup" />
        <van-icon class="icon" name="arrow-down" />
      </div>
      <van-popup style="height: 100vh" :show="show" position="top">
        <van-area
          option-height="100%"
          :columns-num="2"
          :area-list="areaList"
          @confirm="que"
          @cancel="qu"
        />
      </van-popup>
      <van-search
        v-model="value"
        @click="tiaos"
        shape="round"
        background="rgba(0,0,0,0)"
        placeholder="搜索医院、科室、医生"
      />
      </div>
</template>

<script setup lang="ts">
import { areaList } from '@vant/area-data'
import { useRouter } from 'vue-router';
import { defineComponent, ref, onMounted } from 'vue';
// 引入获取地理位置的接口类型声明
interface GeolocationPosition {
  coords: {
    latitude: number;
    longitude: number;
  };
  timestamp: number;
}
interface GeolocationPositionError {
  code: number;
  message: string;
}
// 引入用于获取地理位置的 navigator.geolocation 对象类型声明
interface NavigatorWithGeolocation extends Navigator {
  geolocation: Geolocation;
}

 const city = ref<string>('');

    const getCityByLocation = async (position: GeolocationPosition) => {
      const { latitude, longitude } = position.coords;
      // 使用高德地图API将经纬度转换为城市名称
      const response = await fetch(`https://restapi.amap.com/v3/ip?output=JSON&key=30140447226b5c6e016cc809b22842e4`);
      const data = await response.json();
      city.value = data.city
    };

    const handleLocationError = (error: GeolocationPositionError) => {
      console.error('获取地理位置出错：', error.message);
    };

    onMounted(() => {
      const navigatorWithGeolocation = navigator as NavigatorWithGeolocation;
      if (navigatorWithGeolocation.geolocation) {
        navigatorWithGeolocation.geolocation.getCurrentPosition(getCityByLocation, handleLocationError);
      } else {
        console.error('浏览器不支持地理定位');
      }
    });
const value = ref<string>('')
const show = ref(false)
const router = useRouter()
const tiaos = ()=>{
  router.push("/xiao/selector")
}
const showPopup = () => {
  show.value = true
}
const qu = () => {
  show.value = false
}
const que = event => {
  show.value = false
  city.value = event.selectedOptions[1].text
}
</script>

<style>

</style>